<template>
  <view
      v-show="!isLogin"
      class="box">
    <view class="in-box">

      <view class="icon-box">
        <image
            class="icon"
            :src="$kt.file.byPath('icon/plan.svg')"
        ></image>
      </view>
      <view style="height: 30rpx"></view>
      <kt-button
      @click="toLogin()"
      >{{ $i18n.zhToGlobal("前往登录") }} {{ "➠" }}</kt-button>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      isLogin: this.$kt.userAccount.getIsLogin(),
      userInfo: this.$kt.userAccount.getSelf()
    };
  },
  created() {
    this.$kt.event.on("login:success", () => {
      this.isLogin = true;
      this.userInfo = this.$kt.userAccount.getSelf();
    });
  },
  methods: {
    toLogin() {
      this.$kt.router.toLogin();
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  position: fixed;
  background-color: #FFFFFF;
  z-index: 1000;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.icon {
  width: 200rpx;
  height: 200rpx;
  // 左右晃动的动画
  animation: inNoLoginShake 2s infinite;
}

@keyframes inNoLoginShake {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.in-box{
  position: fixed;
  top: calc(50% - 75rpx);
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 30rpx;
  color: #000000;
  width: 100%;
  padding: 20rpx 60rpx 20rpx 60rpx;
  box-sizing: border-box;
}


</style>
